<template>
  <div class="main-text-list" :style="{ 'grid-template-columns': `repeat(${textList.length}, 1fr)` }">
    <div class="text-list-item" v-for="item in textList" :key="item.label">
      <div class="line" :style="{ background: item.bgColor }"></div>
      <p class="tli-name">{{ item.name }}</p>
      <p class="tli-data">
        <span class="tli-num">{{ formatNumberWithCommas(item.num) }}</span>
      </p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'MainTextList',
    props: {
      textList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        
      }
    },
    methods: {
      formatNumberWithCommas(number) {  //  数字超过三位用逗号分隔
        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
    }
  }
</script>
<style lang="scss" scoped>
  $title_color: #222;
  $name_color: #666;
  .main-text-list {
    margin: 20px 0 0 20px;
    display: grid;
    gap: 35px;
    .text-list-item {
      height: 100px;
      background: #FFF;
      @include flex(center, flex-start);
      flex-direction: column;
      padding-left: 24px;
      position: relative;
      .tli-name {
        color: $name_color;
        font-size: $font_16;
      }
      .line {
        position: absolute;
        width: 4px;
        height: 100%;
        left: 0;
      }
      .tli-num {
        font-size: 32px;
        color: $title_color;
      }
    }
  }
</style>